<template>

  <div class="common-layout" style="width: 100%;height: 100%;">
    <el-container style="width: 100%;height: 100%;">
      <el-header style="background-color: #303133;">
        <div style="color: aliceblue;margin-top: 10px;text-align: center;font-size: 30px;">溯源管理</div>
        <div>
          <span style="color: aliceblue;float: right;margin-top: -30px;">登录人:{{form.userNickname}}</span>
        
        </div>

      </el-header>
      <el-container>
        <el-aside width="150px">
          <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        style="height: 100%;"
      >
      <el-menu-item index="1">
          <el-icon><setting /></el-icon>
          <span @clcik="router.push('/goodsList')">溯源管理</span>
        </el-menu-item>

        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
         <el-button link type="danger" @click="clear()">退出登录</el-button>
        </el-menu-item>
      </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
 

  
</template>

<script setup lang="ts">
import {  RouterView } from 'vue-router'
import { ElMessage, affixProps } from 'element-plus';
import {ref,reactive,onMounted} from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()
import {useCounterStore} from '../stores/counter'
const store=useCounterStore()

import axios from 'axios'
const form=reactive({
  userId:store.$state.userId,
  userNickname:store.$state.userNickname,

})



const handleOpen = (key: string, keyPath: string[]) => {
  
}
const handleClose = (key: string, keyPath: string[]) => {
  
}


const clear=()=>{
    store.$state.userId="";
    store.$state.userNickname="";
    store.$state.isLogin=false
    router.push('/')
}

</script>






